<template>
  <div>
    <div class="header">
      <span>搜索用户数</span>
      <svg
        t="1649853984656"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2518"
        width="20"
        height="20"
      >
        <path
          d="M512 85.333333C276.48 85.333333 85.333333 276.48 85.333333 512S276.48 938.666667 512 938.666667 938.666667 747.52 938.666667 512 747.52 85.333333 512 85.333333z m0 796.444445c-203.662222 0-369.777778-166.115556-369.777778-369.777778S308.337778 142.222222 512 142.222222 881.777778 308.337778 881.777778 512 715.662222 881.777778 512 881.777778z"
          p-id="2519"
          fill="#8a8a8a"
        />
        <path
          d="M549.546667 641.706667l-29.582223 15.928889c2.275556-12.515556 14.791111-62.577778 35.271112-152.462223 2.275556-9.102222 4.551111-36.408889-15.928889-47.786666-6.826667-3.413333-14.791111-3.413333-22.755556 0-9.102222 3.413333-17.066667 7.964444-23.893333 12.515555-4.551111 3.413333-25.031111 18.204444-60.302222 44.373334-6.826667 5.688889-9.102222 14.791111-4.551112 22.755555s13.653333 10.24 20.48 5.688889l34.133334-20.48-35.271111 150.186667c-3.413333 13.653333 1.137778 22.755556 7.964444 30.72 5.688889 6.826667 14.791111 11.377778 23.893333 11.377777 4.551111 0 7.964444-1.137778 11.377778-2.275555 6.826667-3.413333 31.857778-17.066667 76.231111-43.235556 7.964444-4.551111 11.377778-14.791111 5.688889-22.755555-3.413333-5.688889-13.653333-9.102222-22.755555-4.551111z"
          p-id="2520"
          fill="#8a8a8a"
        />
        <path
          d="M523.377778 364.088889m-45.511111 0a45.511111 45.511111 0 1 0 91.022222 0 45.511111 45.511111 0 1 0-91.022222 0Z"
          p-id="2521"
          fill="#8a8a8a"
        />
      </svg>
    </div>
    <div class="main">
      <span class="main-title">12321</span>
      <span class="main-content">17.1</span>
      <svg
        t="1649857042828"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="3547"
        width="20"
        height="20"
      >
        <path
          d="M799.9 96 224.1 96C153.3 96 96 153.3 96 224.1l0 420.3 185.3-185.3c12.5-12.5 32.8-12.5 45.2 0l147.1 147.1 157.7-157.7-32.6-32.6c-11.9-11.9-6.5-32.3 9.8-36.6L751.7 341c16.3-4.4 31.2 10.5 26.8 26.8l-38.4 143.1c-4.4 16.3-24.7 21.7-36.6 9.8l-26.9-26.9L496.2 674.1c-12.5 12.5-32.8 12.5-45.2 0L303.9 527l-198 198c-2.9 2.9-6.3 5-9.9 6.6l0 68.3C96 870.7 153.3 928 224.1 928l575.8 0c70.7 0 128.1-57.3 128.1-128.1L928 224.1C928 153.3 870.7 96 799.9 96z"
          p-id="3548"
          fill="#1afa29"
        />
      </svg>
      <svg
        t="1649857093887"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="4417"
        width="20"
        height="20"
      >
        <path
          d="M799.9 96 224.1 96C153.3 96 96 153.3 96 224.1l0 68.3c3.6 1.6 7 3.7 9.9 6.6l198 198L451 349.9c12.5-12.5 32.8-12.5 45.2 0l180.3 180.3 26.9-26.9c11.9-11.9 32.3-6.5 36.6 9.8l38.4 143.1c4.4 16.3-10.5 31.2-26.8 26.8l-143.1-38.4c-16.3-4.4-21.7-24.7-9.8-36.6l32.6-32.6L473.6 417.8 326.5 564.9c-12.5 12.5-32.8 12.5-45.2 0L96 379.6l0 420.3C96 870.7 153.3 928 224.1 928l575.8 0c70.7 0 128.1-57.3 128.1-128.1L928 224.1C928 153.3 870.7 96 799.9 96z"
          p-id="4418"
          fill="#d81e06"
        />
      </svg>
    </div>
    <div class="footer">
      <!-- 容器 -->
      <div class="charts" ref="charts"></div>
    </div>
  </div>
</template>

<script>
// 引入echarts
import * as echarts from 'echarts'
import { mapState } from 'vuex'
export default {
  mounted() {
    // 初始化echarts实例
    let lineChart = echarts.init(this.$refs.charts)
    // 配置数据
    lineChart.setOption({
      xAxis: {
        show: false,
        type: 'category',
      },
      yAxis: {
        show: false,
      },
      // 系列
      series: [
        {
          type: 'line',
          smooth: true,
          data: [42, 7, 33, 12, 48, 9, 29, 10, 44],
          // 拐点样式设置
          itemStyle: {
            opacity: 0,
          },
          // 线条样式
          lineStyle: {
            color: '#447cdc',
          },
          // 填充颜色
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#5286df', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#fff', // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
      ],
      // 布局测试
      grid: {
        left: -10,
        top: 0,
        right: 0,
        bottom: 0,
      },
    })
  },
  computed: {
    ...mapState({
      listState: (state) => state.home.list,
    }),
  }
}
</script>

<style scoped>
  .header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .header span {
    margin-right: 20px;
    color: #7a7a7a;
  }
  .main-title {
    margin-right: 30px;
    font-size: 24px;
  }
  .main-content {
    margin-right: 10px;
    color: #7a7a7a;
  }
  .charts {
    width: 100%;
    height: 50px;
    color: #447cdc;
  }
</style>